<template>
    <view class="pages" v-if="show">
        <!-- //底部选购盒子 -->
        <view class="typemask " :class="showDetail ? '' :'hide'" @click='showDetailShow' @touchmove.stop="emptyEvent"></view>
        <view class="styleBox" @click.stop='noneFunc' @touchmove.stop="emptyEvent">
            <view class="p-name text-delic">
                <text>酱香科技-七彩茉莉鲜奶茶</text>
            </view>
            <view class="content-box">

                <view class="infoList" :style="'height:'+scrollBoxHeight+'px'">

                    <scroll-view class="fixed-head-scroll" :scroll-y="true" :show-scrollbar="false" scroll-with-animation>
                        <view class="empt"> </view>

                        <view v-for="item,idx in styleJosn" :key="idx" class="i-item">
                            <view class="t-name">
                                <text>{{ item.name}}</text>
                            </view>
                            <view class="parts-i">
                                <view class="p-item" v-for="item2,idx2 in item.info" :key="idx2+100" :class="{'active':idx2 === 0}">
                                    <div class="p-box">
                                        <text>{{ item2.type}}</text>
                                    </div>
                                    <div class="p-box p-price" v-if="item2.price">
                                        <text class="">
                                            <text>￥{{ item2.price}}</text>
                                        </text>
                                    </div>
                                </view>

                            </view>
                        </view>
                        <view class="empt"> </view>
                    </scroll-view>
                </view>
                <view class="info-buy">
                    <view class="chooseInfo">
                        <text class="choose-t">
                            已选规格：
                        </text>
                        <text>
                            正常冰、正常冰、正常冰、正常冰、
                        </text>
                    </view>
                    <div class="handle">

                        <view class="left">
                            <text>总计</text>
                            <text class="price"><text class="min"> ￥</text>15</text>
                        </view>
                        <view class="right">

                            <view class="car">
                                <text class="iconfont icon-jiahao"></text> <text class="ml5">加入购物车</text>
                            </view>

                        </view>

                    </div>
                </view>
            </view>
        </view>
        <view class="cancelBox" @click.stop="closeFunc">
            <text class="iconfont">&#xeaf2;</text>
        </view>

    </view>
</template>

<script>

import Count from './index'
const app = getApp();
export default {
    props: ['hasBeforSub', 'limit', 'show'],
    components: { Count },
    data () {
        return {
            userId: app.globalData.userId,
            selectAutoList: {}, //选中的分类 分类数字作为key sonArr为第三级
            showDetail: true, //展示选中的详情
            totalCount: { cateNum: 0, price: 0 }, //计算
            productPrice: {},
            //弹出授权框
            // showAuthorize: false,
            scrollBoxHeight: 0,
            styleJosn: [
                {
                    name: '分量',
                    info: [
                        {
                            type: '大杯',
                            price: '18'
                        },
                        {
                            type: '中杯',
                            price: '15'
                        },
                        {
                            type: '小杯'
                        }
                    ]
                },
                {
                    name: '甜度',
                    info: [
                        {
                            type: '一份甜'
                        },
                        {
                            type: '大量甜'
                        },
                        {
                            type: '适量，大众口味'
                        }
                    ]
                },
                {
                    name: '温度',
                    info: [
                        {
                            type: '正常冰'
                        },
                        {
                            type: '大量冰'
                        },
                        {
                            type: '温度不可调整'
                        }
                    ]
                },
                {
                    name: '甜度',
                    info: [
                        {
                            type: '一份甜'
                        },
                        {
                            type: '大量甜'
                        },
                        {
                            type: '适量，大众口味'
                        }
                    ]
                },
                {
                    name: '温度',
                    info: [
                        {
                            type: '正常冰'
                        },
                        {
                            type: '大量冰'
                        },
                        {
                            type: '温度不可调整'
                        }
                    ]
                }
            ]
        }
    },
    computed: {
        selectProduct () {

            return this.$store.getters.selectProduct
        }
    },
    watch: {
        selectProduct: {
            immediate: true,
            deep: true,
            handler (current) {

                // console.log('购物变没变', current)

                this.initCars(current)
            }
        },
        show: {
            // immediate: true,
            handler (current) {

                if (current) {
                    uni.hideTabBar()

                    this.countScrollBox()
                } else {
                    setTimeout(() => {
                        uni.showTabBar()
                    }, 300)
                }
            }
        },
    },
    mounted () {


    },
    methods: {
        //图片
        initCars (current) {

            let allPrice = 0,
                p_num = 0

            Object.keys(current).map(key => {

                let item = current[key]

                let minTotal = Number((item.salePrice * item.count).toFixed(2))

                current[key].minTotal = minTotal

                p_num += item.count

                allPrice += minTotal

            })

            this.totalCount = {
                cateNum: p_num,
                price: Number((allPrice).toFixed(2))
            }

            this.isChange = true

            setTimeout(() => {

                this.isChange = false

            }, 200)

        },
        countScrollBox () {

            let that = this

            //如果使用这个 就会有循环
            // const query = uni.createSelectorQuery().in(this);

            let height = null

            uni.createSelectorQuery().in(this).select('.content-box').boundingClientRect(data => {
                // 拿到 scroll-view 组件宽度
                // this.contentScrollW = data.width
                // console.log('99999999', data)

                height = data.height

            }).exec();

            uni.createSelectorQuery().in(this).select('.info-buy').boundingClientRect(data2 => {
                // 拿到 scroll-view 组件宽度
                // this.contentScrollW = data.width
                // console.log('99999999', data)

                that.scrollBoxHeight = height - data2.height


            }).exec();



        },

        showDetailShow () {

            // console.log(111111111111111111111, this.selectAutoList)

            if (!this.showDetail && this.totalCount.cateNum == 0) {
                return
            }

            this.showDetail = !this.showDetail
        },
        emptyEvent () {
            return false;
        },
        finishSelect () {

            // this.$goNext('/pages/supermarket/order/index?supermarketId='+this.supermarketId)

            if (this.totalCount.cateNum == 0) {

                // uni.showToast({
                //     title: '请先选择商品',
                //     icon:'none'
                // })

                return
            }

            if (app.globalData.userId) {

                if (this.hasBeforSub) {

                    this.$emit('beforSubmitFunc')

                }
                else {
                    this.$goNext('/pages/supermarket/order/index?supermarketId=' + app.globalData.supermarketId)
                }

            }
            else {

                this.showAuthorize = true

            }



        },

        //选择了商品
        productChange (e, productId) {

            //剔除商品

            if (e == 0) {
                this.$delete(this.selectProduct, productId)

                this.$store.commit('SET_PRODUCTARR', this.selectProduct)
            }


        },
        clearProduct () {


            Object.keys(this.selectProduct).map(key => {

                let item = this.selectProduct[key]
                this.$set(item, 'count', 0)

                this.$delete(this.selectProduct, key)
            })

            this.showDetail = false
            this.$store.commit('SET_PRODUCTARR', this.selectProduct)
        },
        //空函数 阻止点击事件
        noneFunc () { },
        closeFunc () {

            this.$emit('update:show', false)
        }

    }
}
</script>

<style scoped lang="scss">
.typemask {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 110;
    background: rgba(0, 0, 0, 0.6);
}
.styleBox {
    position: fixed;
    z-index: 111;
    background: #fff;
    border-radius: 20rpx;
    width: 90%;
    height: 64vh;
    left: 5%;
    top: 13%;
    color: #222;

    .p-name {
        padding: 40rpx;
        font-size: 36rpx;
        color: #222;
        // background: #eaeaea;
        height: 110rpx;
    }
    .content-box {
        position: relative;
        height: calc(100% - 110rpx);
    }
    .infoList {
        font-size: 28rpx;
        .fixed-head-scroll {
            height: 100%;
            -webkit-overflow-scrolling: touch;
            padding: 0rpx 20rpx 0rpx 40rpx;
            box-sizing: border-box;
            .empt {
                height: 60rpx;
                width: 100%;
            }
        }
        .t-name {
            color: #888;
        }
        .parts-i {
            margin-bottom: 20rpx;
            padding: 20rpx 0;
            color: #222;
            .p-item {
                font-size: 26rpx;
                display: inline-block;
                line-height: 42rpx;
                border-radius: 8rpx;
                border: 1rpx solid #eaeaea;
                text-align: center;
                margin: 10rpx 20rpx 10rpx 0;
                overflow: hidden;
            }
            .p-box {
                display: inline-block;
                padding: 12rpx 20rpx;
                min-width: 100rpx;
                text-align: center;
            }
            .p-price {
                min-width: auto;
                border-left: 1px solid #eaeaea;
            }
            .active,
            .active .p-box {
                border-color: #e89654;
                // color: #ff8000;
                color: rgb(255, 128, 0);
                background: rgb(255, 251, 241);
                .p-price {
                    color: #ff0000;
                }
            }
        }
    }
}
.cancelBox {
    position: fixed;
    z-index: 110;
    color: #fff;
    bottom: 10%;
    font-size: 50rpx;
    left: 50%;
    margin-left: -75rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: rgba(250, 250, 250, 0.1);
    border: 1px solid #eaeaea;
    text-align: center;
    line-height: 96rpx;
}
.info-buy {
    position: relative;
    .chooseInfo {
        font-size: 24rpx;
        padding: 22rpx 40rpx;
        line-height: 1.5;
        background: rgb(250, 250, 250);
        color: #222;
        .choose-t {
            color: #888;
        }
    }
    .handle {
        overflow: hidden;
        padding: 20rpx 40rpx;
        // background: #eaeaea;
        line-height: 64rpx;
        .left {
            float: left;
            font-size: 30rpx;
            .price {
                font-size: 38rpx;
                color: #ff0000;
                .min {
                    font-size: 28rpx;
                }
            }
        }
        .right {
            float: right;
            .car {
                display: inline-block;
                height: 64rpx;
                text-align: center;
                line-height: 64rpx;
                color: #222;
                border-radius: 4px;
                // background: #313138;
                background-color: rgb(255, 204, 77);
                font-size: 22rpx;
                padding: 0 20rpx;
                font-weight: bold;
            }
        }
    }
}
</style>
